<template>
  <div class="audition81">
    <p>用flex布局最为方便</p>
    <p>示例：</p>
    <v-md-preview :text="text1" />
    <p>页面效果：</p>
    <img src="@images/buju1.png" alt="" class="img">
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition81',
  data() {
    return {
      text1: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          .box {
            height: 100px;
            display: flex;
          }
          .left {
            width: 20%;
            background-color: aquamarine;
          }
          .rig {
            width: 200px;
            background-color: bisque;
          }
          .center {
            flex: auto;
            background-color: pink;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="left">20%</div>
          <div class="center">自适应</div>
          <div class="rig">200px</div>
        </div>
      </body>
      </html>
      \n${suffix}`,
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 100%;
}
</style>